<template>
  <div
    :id="uuid"
    v-on-echart-resize="null"
    class="echart-container"
  ></div>
</template>

<script setup lang="ts">
import { onEchartResize as vOnEchartResize } from './resizeDirective'
import { createUUID, deepClone } from 'lib-utils'
import { ref, onMounted } from 'vue'
import echarts from './echartsUi'
const props = defineProps({
  options: {
    type: Object
  },
  xAxis: []
})
const uuid = ref(createUUID())
onMounted(() => {
  const dom = document.getElementById(uuid.value) // 2 获取dom节点
  let customOption = deepClone(props.options)
  const barChart = echarts.init(dom as HTMLElement) // 3 初始化实例
  const option = {
    title: {
      text: '某站点用户访问来源',
      subtext: '纯属虚构',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'bottom',
      y: 40
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '搜索引擎' },
          { value: 735, name: '直接访问' },
          { value: 580, name: '邮件营销' },
          { value: 484, name: '联盟广告' },
          { value: 300, name: '视频广告' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  let mergeOptions = Object.assign(deepClone(option), customOption)
  // 4 设置实例参数
  barChart.setOption(mergeOptions)
})
</script>

<style lang="less" scoped>
.echart-container {
  height: 400px;
  width: 100%;
}
</style>
